<template>
  <div class="yoyo-container mx-auto min-h-screen">
    <!-- 导航栏 -->
    <navBar :title="$t('reviews.title')"></navBar>

    <!-- 评价统计卡片 -->
    <div class="bg-white mx-4 mt-4 rounded-xl p-4 pb-3 text-center">
      <div class="flex items-center justify-center">
        <h3 class="text-lg font-medium text-gray-800 mb-1 mr-3">{{ $t("reviews.totalReviews") }}</h3>
        <!-- 评价数量显示 -->
        <div class="flex items-center justify-center mb-1 text-2xl font-bold text-[#ff7a00]">
          {{ totalReviewsCount }}
        </div>
      </div>
      <!-- yoyo币统计 -->
      <div class="text-sm text-gray-500" v-if="$i18n.locale === 'zh-CN'">
        ({{ $t("reviews.totalYoyoCount") }}{{ totalReviewsCount }}{{ $t("mine.points") }})
      </div>
      <div class="text-sm text-gray-500" v-else>({{ totalReviewsCount }} {{ $t("reviews.totalYoyoCount") }})</div>
    </div>

    <!-- 标签页 -->
    <div class="mx-4 mt-4 bg-white rounded-xl overflow-hidden">
      <van-tabs v-model="activeTab" class="review-tabs yoyo-container" sticky offset-top="3rem">
        <van-tab :title="$t('reviews.tabs.pending')" name="pending">
          <!-- 待评价记录 -->
          <div class="px-4">
            <div v-if="pendingReviews.length === 0" class="text-center py-8 text-gray-500">
              {{ $t("reviews.noPendingReviews") }}
            </div>
            <div v-for="(review, index) in pendingReviews" :key="index" class="py-4 border-b border-gray-100 last:border-b-0">
              <div class="flex justify-between items-center">
                <div class="flex-1">
                  <div class="font-medium text-gray-800 mb-1">{{ review.productName }}</div>
                  <div class="text-sm text-gray-500 mb-1">{{ $t("reviews.orderNumber") }}: {{ review.orderNumber }}</div>
                  <div class="text-sm text-gray-400">{{ review.orderDate }}</div>
                </div>
                <van-button
                  type="primary"
                  size="small"
                  class="w-13 h-6 leading-6 p-0 rounded-xl bg-orange-500 border-0"
                  @click="handleReview(review)">
                  {{ $t("reviews.reviewButton") }}
                </van-button>
              </div>
            </div>
          </div>
        </van-tab>

        <van-tab :title="$t('reviews.tabs.completed')" name="completed">
          <!-- 已评价记录 -->
          <div class="px-4">
            <div v-if="completedReviews.length === 0" class="text-center py-8 text-gray-500">
              {{ $t("reviews.noCompletedReviews") }}
            </div>
            <div v-for="(review, index) in completedReviews" :key="index" class="py-4 border-b border-gray-100 last:border-b-0">
              <div class="flex justify-between items-start">
                <div class="flex-1">
                  <div class="font-medium text-gray-800 mb-1">{{ review.productName }}</div>
                  <div class="text-sm text-gray-500 mb-1">{{ $t("reviews.orderNumber") }}: {{ review.orderNumber }}</div>
                  <div class="text-sm text-gray-400 mb-2">{{ review.orderDate }}</div>

                  <!-- 评价信息 -->
                  <div class="bg-gray-50 rounded-lg p-3 mt-2">
                    <div class="flex items-center mb-2">
                      <van-rate v-model="review.rating" :readonly="true" :size="14" color="#ffd21e" void-color="#eee" />
                      <span class="text-sm text-gray-600 ml-2">{{ review.rating }} {{ $t("reviews.stars") }}</span>
                    </div>
                    <div class="text-sm text-gray-700 mb-1">{{ review.reviewContent }}</div>
                    <div class="text-xs text-gray-400">{{ $t("reviews.reviewTime") }}: {{ review.reviewTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 评价弹框 -->
    <CommonDialog :visible.sync="showReviewPopup" :buttons="dialogButtons" @button-click="handleButtonClick" @close="handleClose">
      <div v-if="currentReview" class="">
        <!-- 星级评分 -->
        <div class="mb-6 text-center">
          <van-rate v-model="reviewForm.rating" :size="34" color="#ffd21e" void-color="#eee" class="justify-center" />
        </div>

        <!-- 评价标签 -->
        <div class="flex justify-center items-center flex-wrap gap-2">
          <div
            v-for="tag in reviewTags"
            :key="tag.id"
            :class="[
              'py-1 px-2 rounded-full border cursor-pointer transition-colors text-sm',
              tag.checked ? 'bg-orange-500 border-orange-500 text-white' : 'bg-white border-gray-300 text-gray-700',
            ]"
            @click="toggleTag(tag.id)">
            <span class="flex items-center justify-center">{{ tag.text }}</span>
          </div>
        </div>

        <!-- 评价内容输入框 -->
        <div class="my-4">
          <van-field
            v-model="reviewForm.content"
            type="textarea"
            :placeholder="$t('reviews.reviewPlaceholder')"
            rows="3"
            maxlength="500"
            show-word-limit
            :border="false"
            class="bg-gray-50 rounded-lg" />
        </div>
      </div>
    </CommonDialog>
  </div>
</template>

<script>
import { Tabs, Tab, Field, Rate } from "vant"

export default {
  name: "MyReviews",
  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [Field.name]: Field,
    [Rate.name]: Rate,
  },
  data() {
    return {
      activeTab: "pending",
      showReviewPopup: false,
      submitting: false,
      currentReview: null,
      reviewForm: {
        rating: 5,
        content: "",
      },
      reviewTags: [
        { id: 1, text: "网速快", icon: "success", checked: false },
        { id: 2, text: "网络覆盖好", icon: "success", checked: false },
        { id: 3, text: "物超所值", icon: "like", checked: false },
        { id: 4, text: "使用便捷", icon: "success", checked: false },
        { id: 5, text: "容易激活", icon: "success", checked: false },
        { id: 6, text: "客服友好", icon: "", checked: false },
        { id: 7, text: "体验棒", icon: "", checked: false },
        { id: 8, text: "支持热点分享", icon: "", checked: false },
        { id: 9, text: "回复快速", icon: "", checked: false },
      ],
      // 模拟数据
      pendingReviews: [
        {
          id: 1,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 中国大陆 + 香港 20GB 10天",
          orderDate: "2025年3月26日",
        },
        {
          id: 2,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 日本 20GB 8天",
          orderDate: "2025年3月26日",
        },
        {
          id: 3,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 韩国 15GB 7天",
          orderDate: "2025年3月20日",
        },
        {
          id: 4,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 泰国 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 5,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 马来西亚 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 6,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 新加坡 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 7,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 印度 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 8,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 菲律宾 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 9,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 越南 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 10,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 印度尼西亚 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 11,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 马来西亚 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 12,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 新加坡 10GB 5天",
          orderDate: "2025年3月15日",
        },
        {
          id: 13,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 菲律宾 10GB 5天",
          orderDate: "2025年3月15日",
        },
      ],
      completedReviews: [
        {
          id: 3,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 韩国 15GB 7天",
          orderDate: "2025年3月20日",
          rating: 5,
          reviewContent: "网络速度很快，信号稳定，激活简单方便，非常满意的购买体验！",
          reviewTime: "2025年3月22日",
        },
        {
          id: 4,
          orderNumber: "xxxxxxxxxxxxxxxxxxxx",
          productName: "eSIM- 泰国 10GB 5天",
          orderDate: "2025年3月15日",
          rating: 4,
          reviewContent: "整体使用体验不错，网络覆盖范围广，价格合理。",
          reviewTime: "2025年3月18日",
        },
      ],
      dialogButtons: [{ text: this.$t("reviews.publish"), type: "primary", action: "submit" }],
    }
  },
  computed: {
    totalReviewsCount() {
      return this.pendingReviews.length + this.completedReviews.length
    },
    pendingCount() {
      return this.pendingReviews.length
    },
    completedCount() {
      return this.completedReviews.length
    },
  },
  methods: {
    handleReview(review) {
      this.currentReview = review
      this.reviewForm = {
        rating: 5,
        content: "",
      }
      // 重置所有标签为未选中状态
      this.reviewTags.forEach((tag) => {
        tag.checked = false
      })
      this.showReviewPopup = true
    },
    toggleTag(tagId) {
      const tag = this.reviewTags.find((t) => t.id === tagId)
      if (tag) {
        tag.checked = !tag.checked
      }
    },
    handleButtonClick(event) {
      if (event.action === "submit") {
        this.submitReview()
      }
    },
    handleClose() {
      this.showReviewPopup = false
    },
    async submitReview() {
      if (!this.reviewForm.content.trim()) {
        this.$toast(this.$t("reviews.reviewPlaceholder"))
        return
      }

      this.submitting = true

      try {
        // 模拟API调用
        await new Promise((resolve) => setTimeout(resolve, 1500))

        // 获取选中的标签
        const selectedTags = this.reviewTags.filter((tag) => tag.checked).map((tag) => tag.text)

        // 将待评价订单移动到已评价列表
        const reviewIndex = this.pendingReviews.findIndex((r) => r.id === this.currentReview.id)
        if (reviewIndex !== -1) {
          const reviewedOrder = {
            ...this.currentReview,
            rating: this.reviewForm.rating,
            reviewContent: this.reviewForm.content,
            selectedTags: selectedTags,
            reviewTime: new Date().toLocaleDateString("zh-CN", {
              year: "numeric",
              month: "long",
              day: "numeric",
            }),
          }

          this.pendingReviews.splice(reviewIndex, 1)
          this.completedReviews.unshift(reviewedOrder)
        }

        this.$toast.success(this.$t("reviews.reviewSuccess"))
        this.showReviewPopup = false

        // 如果当前在待评价标签页且没有待评价订单了，切换到已评价标签页
        if (this.activeTab === "pending" && this.pendingReviews.length === 0) {
          this.activeTab = "completed"
        }
      } catch (error) {
        this.$toast.fail(this.$t("reviews.reviewFailed"))
      } finally {
        this.submitting = false
      }
    },
    goBack() {
      this.$router.go(-1)
    },
  },
}
</script>

<style scoped>
/deep/ .van-sticky {
  width: 100%;
}

@media (width >= 40rem) {
  :deep(.van-sticky) {
    max-width: 40rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}

@media (width >= 48rem) {
  :deep(.van-sticky) {
    max-width: 48rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}

@media (width >= 64rem) {
  :deep(.van-sticky) {
    max-width: 64rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
@media (width >= 80rem) {
  :deep(.van-sticky) {
    max-width: 64rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
@media (width >= 96rem) {
  :deep(.van-sticky) {
    max-width: 72rem;
    margin-inline: auto;
    padding: 0 1rem;
  }
}
</style>
